<template>
  <div>
    <van-sticky>
      <van-nav-bar title="van-list示例" class="nav-bar" left-arrow @click-left="navToBack"/>
    </van-sticky>

    <div class="content">
      <van-pull-refresh v-model="pullLoading" @refresh="onPullRefresh">
        <van-empty v-show="pageData.listFinished && pageData.list.length == 0" class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无数据"/>

        <template v-show="!(pageData.listFinished && pageData.list.length == 0)">
          <van-list v-model="pageData.listLoading" :finished="pageData.listFinished" :offset="100" finished-text="全部加载完毕" @load="onListLoad">
            <div v-for="(item, index) in pageData.list" :key="index">
              <van-cell :title="item.name" :value="item.idCardNo" size="large" :label="item.address" style="border-bottom: 1px solid #E2E2E2"/>
            </div>
          </van-list>
        </template>

      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import common from '@/mixins/common'
export default {
  mixins: [common],
  data () {
    return {
      pullLoading: false,
      pageData: {
        page: 1,
        size: 10,
        list: [],
        listLoading: false,
        listFinished: false
      },
      pageParams: {
        keyWord: ''
      }
    }
  },
  methods: {
    // 下拉刷新
    onPullRefresh () {
      this.resetPageData()
      this.pageData.listLoading = true
      this.getPageData().then(() => {
        this.pullLoading = false
      })
    },
    // 列表加载
    onListLoad () {
      this.getPageData()
    },
    // 查询分页数据
    getPageData () {
      const data = Object.assign({}, this.pageData, this.pageParams)
      return this.$axios.post('/member/page', data).then(res => {
        this.pageData.list.push(...res.data.list)
        return res
      }).then(res => {
        this.pageData.listLoading = false
        if (res.data.pages === this.pageData.page) {
          this.pageData.listFinished = true
        } else {
          this.pageData.page++
        }
      })
    },
    // 重置分页基础参数
    resetPageData () {
      this.pageData = {
        page: 1,
        size: 10,
        list: [],
        listLoading: false,
        listFinished: false
      }
      this.pageParams = {
        keyWord: ''
      }
    }
  }
}
</script>

<style>
.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>

<style scoped>

</style>
